<template>
	<view>
		<view class="m-head">
			<view class="m-head-info">
				<image src="../static/shop/shop-pay-success.png" mode=""></image>
				<view class="">
					<view class="m-head-font1">
						<text>支付成功!</text>
					</view>
					<view class="m-head-font2">
						<text>感谢您的购买</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-card">
			<view class="m-card-top">
				<text class="m-card-jifen" v-if="detail.pay_type == 3">{{detail.pay_json.jifen_pay.jifen || 0}}</text>
				<text class="m-card-price" v-else>{{detail.price || 0}}</text>
			</view>
			<view class="m-cell">
				<text>订单编号：</text>
				<text class="m-cell-value">{{detail.orderId || ''}}</text>
			</view>
			<view class="m-cell">
				<text>下单时间：</text>
				<text class="m-cell-value">{{detail.dtTime || ''}}</text>
			</view>
			<view class="m-cell">
				<text>支付方式：</text>
				<text class="m-cell-value" v-if="detail.pay_type == 3">积分支付</text>
				<text class="m-cell-value" v-else>微信支付</text>
			</view>
		</view>
		
		<view class="m-bottom">
			<view class="m-bottom-btn" @click="to_redirect('/pages/order/detail?id='+id)">
				<text>订单详情</text>
			</view>
			<view class="m-bottom-btn m-bottom-extend" @click="toHome">
				<text>返回首页</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detail:{
					pay_json:{}
				}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getOrdersInfo()
		},
		
		methods: {
			toHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getOrdersInfo() {
				this.$http.getJson('hotal_orderInfo', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.m-head{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 750rpx;
	height: 480rpx;
	background: linear-gradient(180deg, #D3A358 0%, #D3A358 77%, #F6F6F6 100%);
	.m-head-info{
		display: flex;
		align-items: center;
		padding-top: 80rpx;
		image{
			width: 140rpx;
			height: 136rpx;
			margin-right: 20rpx;
		}
		.m-head-font1{
			font-size: 36rpx;
			color: #fff;
			font-weight: 600;
		}
		.m-head-font2{
			font-size: 26rpx;
			color: #fff;
		}
	}
}

.m-card{
	transform: translateY(-220rpx);
	width: 710rpx;
	height: 487rpx;
	background: url("../static/shop/shop-result-bg.png");
	background-size: 100% 100%;
	margin-left: 20rpx;
	.m-card-top{
		font-size: 72rpx;
		color: #D3A358;
		font-weight: 600;
		text-align: center;
		padding-top: 45rpx;
		margin-bottom: 90rpx;
		.m-card-price{
			&::after{
				content: '元';
				font-size: 36rpx;
			}
		}
		.m-card-jifen{
			&::after{
				content: '积分';
				font-size: 36rpx;
			}
		}
	}
	.m-cell{
		display: flex;
		align-items: center;
		padding-left: 46rpx;
		font-size: 26rpx;
		color: #33302D;
		padding-bottom: 40rpx;
		.m-cell-value{
			font-size: 26rpx;
			color: #9B958F;
		}
	}
}

.m-bottom{
	position: fixed;
	bottom: 160rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	.m-bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 329rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #E6E2DE;
		font-size: 32rpx;
		color: #9B958F;
	}
	.m-bottom-extend{
		border-color: #D3A358;
		background: #D3A358;
		color: #fff;
		margin-left: 20rpx;
	}
}
</style>
